<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--两者顺序不能调-->
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--将所有页面交给路由处理-->
    <router-view></router-view>
</div>

<!--登录页开始-->
<template id="login">
    <div>
        <h4>用户登录</h4>
    </div>
</template>
<script>
    var login=Vue.component('login',{
        template:'#login',
    });
</script>
<!--登录页结束-->

<!--主页开始-->

<!--主页结束-->

<!--404页开始-->
<template id="not-found">
    <div>
        <h1>404！页面走丢了</h1>
    </div>
</template>
<script>
    var notFound = Vue.component('not-found',{
        template: '#not-found'
    });
</script>
<!--404页结束-->
<script>
    var router=new VueRouter({
        routes:[
            {
                path:'/',
                redirect(){
                    return '/login';
                }
            },
            {
                path:'/login', //路径
                name:'登录',
                component:login  //组件
            },
            {
                path: '*',
                name:'404',
                component: notFound
            }
        ]
    });
    var vm=new Vue({
        el:'#app',
        router
    });
</script>
</body>
</html>